import Layout from 'layout'
import ReactDOM from 'react-dom'
import React, {Component} from 'react'
import Link from 'next/link'
import { Tag, Pagination, Input, Icon } from 'antd'
import { addContainer, searchContainer, list, container } from 'styles/admin'
import request from 'utils/request'
import Empty from 'components/Empty'
import {observable, computed} from 'mobx'
import {observer, Provider, inject} from 'mobx-react'
import classNames from 'classnames'

class Store {
  @observable list = []
  @observable search
  @observable inputActive
  @observable page
  constructor(list) {
    this.list = list
    this.search = ''
    this.inputActive = false
    this.page = 1
  }
}

function Add() {
  return (
    <Link href={`/admin/edit`}>
      <div className="add-container">
        <Icon type="plus" style={{color: '#fff'}} />
        <style jsx>{addContainer}</style>
      </div>
    </Link> 
  )
}

const Header = inject('store', 'onSearch')(observer(({store, onSearch}) => {
  return (
    <div className="search-container">
      <div className={classNames('input-container', 'fr', {active: store.inputActive})}
        onMouseEnter={() => store.inputActive = true}
        onMouseLeave={() => store.inputActive = false}
      > 
        <Icon
          type="search"
          style={{color: store.inputActive ? '#e25e5e' : '#555'}}
        />
        <input
          value={store.search}
          onChange={(e)=>{store.search=e.target.value}}
          onKeyPress={(e)=>{onSearch(e.key)}}
        />
      </div>
      <style jsx>{searchContainer}</style>
    </div>
  )
}))

function ListItem({title, _id, isPublished}) {
  return (
    <Link href={`/admin/edit?id=${_id}`}>
      <a>
        <span>{isPublished ? '♥' : '🖍'}</span>
        {title}
        <style jsx>{list}</style>
      </a>
    </Link>
  )
}

const List = inject('store','onPaginationChange')(observer(
  ({store, onPaginationChange}) => {
  const page = store.page  
  return (
    <div>
      {store.list
      .slice((page-1)*20, page*20)
      .map(list => <ListItem {...list} key={list._id}></ListItem>)}
      <Pagination
      size="small"
      total={store.list.length}
      onChange={onPaginationChange}
      pageSize={20}
      style={{
        position: 'absolute',
        bottom: '20px',
        left: '50%',
        transform: 'translate3d(-50%, 0, 0)'
      }} />
    </div>
  )
}))

@observer
class App extends Component {
  constructor(props) {
    super(props);
    this.store = new Store(props.list)
    if (typeof window !== 'undefined') window.store = this.store
  }

  componentDidMount(){
    document.title='admin'
  }

  static async getInitialProps({req}) {
    const isServer = !!req
    return {list: (await request('get', 'blog/listOfAll')).data}
  }

  paginationChange(page, pageSize) {
    this.store.page = page
  }

  async searchBlog(key) {
    const store = this.store
    if(key === 'Enter') {
      store.list = await (request('get', 'blog/findByTitle', {search: store.search})).data
    }
  }

  render() {
    return (
      <Provider
        store={this.store}
        onSearch={this.searchBlog.bind(this)}
        onPaginationChange={this.paginationChange.bind(this)}
      >
      <Layout>
        <Header />
        <div className="container">
          {this.store.list.length ? <List/> : <Empty/>}
          <style jsx>{container}</style>
        </div>
        <Add />
      </Layout>
      </Provider>
    )
  }
}

export default App